<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- vue会复用已有元素而不是重新渲染，切换loginType时，不会清空输入框中已有的内容 -->
		<div id="demo">
			<template v-if="loginType=='userName'">
				<label>用户名</label>
				<input id="txtUsreName" placeholder="请输入用户名" />
			</template>

			<template v-if="loginType=='email'">
				<label>Email</label>
				<input id="txtEmail" placeholder="请输入邮箱地址" />
			</template>
		</div>

		<!-- 元素设置key属性，每次切换时，会重新渲染，清空输入框已有内容 -->
		<div id="demo2">
			<template v-if="loginType=='userName'">
				<label>用户名</label>
				<input id="txtUsreName" placeholder="请输入用户名" key="username-input" />
			</template>

			<template v-if="loginType=='email'">
				<label>Email</label>
				<input id="txtEmail" placeholder="请输入邮箱地址" key="email-input" />
			</template>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#demo",
				data: {
					loginType: 'userName'
				}
			})

			var vm2 = new Vue({
				el: "#demo2",
				data: {
					loginType: 'userName'
				}
			})
		</script>

	</body>
</html>
